<template>
  <div id="app">
    <h2>{{title}}</h2>
    <input type="text" v-model="things"/>
    <button v-on:click="addthings" @keyup.enter="addthings">添加</button><br>
      <div v-for="(todo, index) in todos"
          :id="index">
        <input type="checkbox" v-bind:checked="todo.done"  @click="swithting(index)"/> {{index+1}}.
        <span v-bind:class="{del:todo.done}">
            {{todo.value}}</span>
        <time>{{todo.created|date}}</time>
      </div>
    <todo v-bind:total="todos.length" :nn="nn"></todo>
  </div>
  </div>
  </div>
</template>
<script>
import todo from './Todo.vue'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
  name: 'app',
  components:{todo},
  methods: {
    addthings: function () {
      this.todos.push({value: this.things, done: false})
    },
    swithting: function (index) {
      this.todos[index].done = !this.todos[index].done;
    }
  },
  computed: {
    nn:function(){
      var count=0;
      for(var i=0;i<this.todos.length;i++){
        if(this.todos[i].done){
          count++;
        }
      }
      return count;
    }
  },

    data() {
      return {
        title: 'vue-todos',
        things: "",
        todos: [
          {value: "阅读一本关于前端开发的书", done: false, created: new Date()},
          {value: "补充范例代码", done: true, created: new Date()},
          {value: "写心得", done: false, created: new Date()}
        ]
      }},
  filters: {
    date: function (val) {
      //return (val.getHours() + ":" + val.getMinutes() + ":" + val.getSeconds())
      return moment(val).calendar()
    }
  }

}

</script>
<style>
  .del{text-decoration:line-through}
</style>


